<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博热搜数据可视化大屏</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 星空背景动画 */
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        @keyframes moveStars {
            0% { transform: translateY(0); }
            100% { transform: translateY(-1000px); }
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            height: 100vh;
            background: linear-gradient(135deg, #0a1220, #16213e, #0f1c3f);
        }

        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        .shooting-star {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
            animation: shooting 8s infinite;
        }

        @keyframes shooting {
            0% {
                opacity: 0;
                transform: translate(0, 0) rotate(30deg);
            }
            10% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate(500px, 200px) rotate(30deg);
            }
        }

        /* 更新现代无衬线字体 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        :root {
            --primary-bg: linear-gradient(135deg, rgba(15, 28, 63, 0.6), rgba(26, 42, 95, 0.6));
            --card-bg: rgba(16, 33, 68, 0.85);
            --card-border: rgba(64, 158, 255, 0.3);
            --accent-color-1: #4facfe;
            --accent-color-2: #00f2fe;
            --accent-color-3: #ff6a88;
            --accent-color-4: #ffd371;
            --text-primary: #e0e7ff;
            --text-secondary: #a3b1d5;
            --shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
            --glow: 0 0 15px rgba(79, 172, 254, 0.7);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
        }

        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            padding: 15px;
        }

        .dashboard-header {
            text-align: center;
            padding: 15px 0;
            margin-bottom: 15px;
            position: relative;
            z-index: 10;
        }

        .dashboard-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-color-1), transparent);
        }

        .dashboard-header h1 {
            font-size: 2.3rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
            position: relative;
            display: inline-block;
            animation: titleGlow 3s infinite alternate;
        }

        @keyframes titleGlow {
            0% { text-shadow: 0 0 10px rgba(79, 172, 254, 0.5); }
            100% { text-shadow: 0 0 25px rgba(0, 242, 254, 0.8); }
        }

        .dashboard-header h1::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
            border-radius: 2px;
            animation: linePulse 2s infinite alternate;
        }

        @keyframes linePulse {
            0% { width: 60%; opacity: 0.8; }
            100% { width: 80%; opacity: 1; }
        }

        .dashboard-header p {
            font-size: 1rem;
            color: var(--text-secondary);
            max-width: 800px;
            margin: 10px auto 0;
            line-height: 1.5;
        }

        .stats-container {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .stat-card {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 12px 15px;
            min-width: 140px;
            text-align: center;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 10;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-color-1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), var(--glow);
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 5px 0;
            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textPulse 2s infinite alternate;
        }

        @keyframes textPulse {
            0% { text-shadow: 0 0 5px rgba(79, 172, 254, 0.3); }
            100% { text-shadow: 0 0 15px rgba(0, 242, 254, 0.5); }
        }

        .stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .dashboard-wrapper {
            max-width: 1800px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 16px;
            background: rgba(16, 33, 68, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(5px);
            position: relative;
            z-index: 10;
            border: 1px solid rgba(64, 158, 255, 0.2);
        }

        .dashboard-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 280px 280px;
            gap: 15px;
            padding: 15px;
            flex: 1;
            overflow: hidden;
        }

        .chart-container {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 15px;
            box-shadow: var(--shadow);
            border: 1px solid var(--card-border);
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;
            z-index: 10;
        }

        .chart-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), var(--glow);
            border-color: rgba(64, 158, 255, 0.6);
        }

        .chart-container:hover::before {
            opacity: 1;
        }

        .chart-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--accent-color-1);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chart-title i {
            font-size: 1rem;
            color: var(--accent-color-2);
            animation: iconPulse 2s infinite alternate;
        }

        @keyframes iconPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }

        .chart {
            flex: 1;
            width: 100%;
        }

        .chart-large {
            grid-column: span 2;
        }

        .chart-full {
            grid-column: span 4;
            grid-row: span 2;
        }

        .footer {
            text-align: center;
            padding: 15px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            position: relative;
            border-top: 1px solid rgba(64, 158, 255, 0.2);
            z-index: 10;
        }

        /* 响应式设计 */
        @media (max-width: 1400px) {
            .dashboard-container {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 260px 260px 260px;
            }

            .chart-large {
                grid-column: span 3;
            }
        }

        @media (max-width: 992px) {
            .dashboard-container {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto;
            }

            .chart-large {
                grid-column: span 2;
            }

            .dashboard-header h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            .dashboard-container {
                grid-template-columns: 1fr;
            }

            .chart-large, .chart-full {
                grid-column: span 1;
            }

            .dashboard-header h1 {
                font-size: 1.8rem;
            }

            .stats-container {
                flex-direction: column;
                align-items: center;
            }

            .stat-card {
                width: 100%;
                max-width: 240px;
            }

            body {
                padding: 10px;
            }
        }

        /* 滚动条样式 */
        .dashboard-container::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .dashboard-container::-webkit-scrollbar-track {
            background: rgba(16, 33, 68, 0.3);
            border-radius: 4px;
        }

        .dashboard-container::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #4facfe, #00f2fe);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 星空背景 -->
    <div class="stars" id="stars"></div>

    <div class="dashboard-header">
        <h1>微博热搜数据可视化分析</h1>
        <p>基于实时微博热搜数据，多维度展示热门话题分布、热度趋势及分类占比</p>

        <div class="stats-container" id="statsContainer">
            <!-- 统计数据将通过JavaScript动态填充 -->
            <div class="stat-card">
                <div class="stat-label">总热搜数量</div>
                <div class="stat-value" id="totalValue">0</div>
                <div class="stat-label">今日数据</div>
            </div>

            <div class="stat-card">
                <div class="stat-label">最高热度</div>
                <div class="stat-value" id="maxHeatValue">0</div>
                <div class="stat-label" id="maxHeatLabel">暂无数据</div>
            </div>

            <div class="stat-card">
                <div class="stat-label">平均热度</div>
                <div class="stat-value" id="avgHeatValue">0</div>
                <div class="stat-label">所有热搜</div>
            </div>

            <div class="stat-card">
                <div class="stat-label">娱乐占比</div>
                <div class="stat-value" id="entertainmentPercent">0%</div>
                <div class="stat-label">主要类别</div>
            </div>

            <div class="stat-card">
                <div class="stat-label">新话题数</div>
                <div class="stat-value" id="newTopicsValue">0</div>
                <div class="stat-label">今日新增</div>
            </div>
        </div>
    </div>

    <div class="dashboard-wrapper">
        <div class="dashboard-container">
            <!-- 热搜排行榜TOP10 -->
            <div class="chart-container">
                <div class="chart-title"><i class="fas fa-chart-bar"></i> 热搜排行榜TOP10</div>
                <div class="chart" id="top10Chart"></div>
            </div>

            <!-- 热搜分类分布 -->
            <div class="chart-container">
                <div class="chart-title"><i class="fas fa-pie-chart"></i> 热搜分类分布</div>
                <div class="chart" id="categoryChart"></div>
            </div>

            <!-- 热度趋势分布 -->
            <div class="chart-container chart-large">
                <div class="chart-title"><i class="fas fa-line-chart"></i> 热度趋势分布</div>
                <div class="chart" id="trendChart"></div>
            </div>

            <!-- 标签类型分布 -->
            <div class="chart-container">
                <div class="chart-title"><i class="fas fa-tags"></i> 标签类型分布</div>
                <div class="chart" id="labelChart"></div>
            </div>

            <!-- 分类平均热度 -->
            <div class="chart-container">
                <div class="chart-title"><i class="fas fa-fire"></i> 分类平均热度</div>
                <div class="chart" id="avgHeatChart"></div>
            </div>

            <!-- 热搜热度分布 -->
            <div class="chart-container chart-large">
                <div class="chart-title"><i class="fas fa-chart-area"></i> 热搜热度分布</div>
                <div class="chart" id="distributionChart"></div>
            </div>
        </div>

        <div class="footer">
            数据来源：微博热搜 | 可视化分析 © 2025 | 最后更新：<span id="updateTime"></span>
        </div>
    </div>

    <script>
        // 创建星空背景
        function createStarfield() {
            const starsContainer = document.getElementById('stars');
            const starCount = 200;

            for (let i = 0; i < starCount; i++) {
                // 创建普通星星
                const star = document.createElement('div');
                star.classList.add('star');

                // 随机大小和位置
                const size = Math.random() * 2 + 1;
                const left = Math.random() * 100;
                const top = Math.random() * 100;
                const animationDelay = Math.random() * 5;

                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.left = `${left}%`;
                star.style.top = `${top}%`;
                star.style.animationDelay = `${animationDelay}s`;

                starsContainer.appendChild(star);

                // 创建流星（每20颗星星创建一个流星）
                if (i % 20 === 0) {
                    const shootingStar = document.createElement('div');
                    shootingStar.classList.add('shooting-star');

                    const shootLeft = Math.random() * 100;
                    const shootTop = Math.random() * 100;
                    const shootDelay = Math.random() * 20;
                    const shootDuration = Math.random() * 5 + 3;
                    const width = Math.random() * 100 + 50;

                    shootingStar.style.left = `${shootLeft}%`;
                    shootingStar.style.top = `${shootTop}%`;
                    shootingStar.style.width = `${width}px`;
                    shootingStar.style.animationDelay = `${shootDelay}s`;
                    shootingStar.style.animationDuration = `${shootDuration}s`;

                    starsContainer.appendChild(shootingStar);
                }
            }
        }

        // 从后端API获取热搜数据
        function fetchHotSearches() {
            return fetch('/api/hot_searches')
                .then(response => response.json())
                .catch(error => {
                    console.error('Error fetching hot searches:', error);
                    return [];
                });
        }

        // 从后端API获取统计数据
        function fetchStats() {
            return fetch('/api/stats')
                .then(response => response.json())
                .catch(error => {
                    console.error('Error fetching stats:', error);
                    return {
                        total: 0,
                        max_heat: 0,
                        avg_heat: 0,
                        entertainment_percent: 0,
                        new_topics: 0
                    };
                });
        }

        // 更新统计数据展示
        function updateStatsDisplay(stats) {
            document.getElementById('totalValue').textContent = stats.total;
            document.getElementById('maxHeatValue').textContent = (stats.max_heat / 1000).toFixed(0) + 'K';
            document.getElementById('avgHeatValue').textContent = (stats.avg_heat / 1000).toFixed(0) + 'K';
            document.getElementById('entertainmentPercent').textContent = stats.entertainment_percent + '%';
            document.getElementById('newTopicsValue').textContent = stats.new_topics;

            // 更新最后更新时间
            const now = new Date();
            document.getElementById('updateTime').textContent =
                `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ` +
                `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
        }

        // 数据处理函数
        function processData(weiboData) {
            // 热搜排行榜TOP10
            const top10Data = [...weiboData]
                .sort((a, b) => b.Num - a.Num)
                .slice(0, 10)
                .map(item => ({
                    name: item.Note,
                    value: item.Num
                }));

            // 热搜分类分布
            const categoryData = {};
            weiboData.forEach(item => {
                const category = item.Flag || "其他";
                categoryData[category] = (categoryData[category] || 0) + 1;
            });
            const categoryChartData = Object.keys(categoryData).map(key => ({
                name: key,
                value: categoryData[key]
            }));

            // 热度趋势分布
            const trendData = [...weiboData]
                .sort((a, b) => b.Num - a.Num)
                .map((item, index) => item.Num);

            // 标签类型分布
            const labelData = {};
            weiboData.forEach(item => {
                const label = item.Label || "无标签";
                labelData[label] = (labelData[label] || 0) + 1;
            });
            const labelChartData = Object.keys(labelData).map(key => ({
                name: key,
                value: labelData[key]
            }));

            // 分类平均热度
            const avgHeatData = {};
            const categoryCount = {};
            weiboData.forEach(item => {
                const category = item.Flag || "其他";
                categoryCount[category] = (categoryCount[category] || 0) + 1;
                avgHeatData[category] = (avgHeatData[category] || 0) + item.Num;
            });
            const avgHeatChartData = Object.keys(avgHeatData).map(key => ({
                name: key,
                value: Math.round(avgHeatData[key] / (categoryCount[key] || 1))
            }))
            .sort((a, b) => b.value - a.value);

            // 热度分布直方图数据
            const heatBins = [0, 100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000, 1100000, 1200000, 1300000, 1400000];
            const distributionData = new Array(heatBins.length - 1).fill(0);

            weiboData.forEach(item => {
                for (let i = 0; i < heatBins.length - 1; i++) {
                    if (item.Num >= heatBins[i] && item.Num < heatBins[i + 1]) {
                        distributionData[i]++;
                        break;
                    }
                }
            });

            const distributionLabels = heatBins.slice(0, -1).map((bin, i) =>
                `${(bin/10000).toFixed(0)}万-${(heatBins[i+1]/10000).toFixed(0)}万`
            );

            return {
                top10Data,
                categoryChartData,
                trendData,
                labelChartData,
                avgHeatChartData,
                distributionData,
                distributionLabels,
            };
        }

        // 图表初始化函数
        function initCharts(weiboData) {
            const processedData = processData(weiboData);

            // 热搜排行榜TOP10
            const top10Chart = echarts.init(document.getElementById('top10Chart'));
            top10Chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: {c}'
                },
                grid: {
                    left: '0%',
                    right: '5%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: function(value) {
                            return (value / 10000).toFixed(1) + '万';
                        },
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.2)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: processedData.top10Data.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        fontSize: 10,
                        color: '#e0e7ff'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [{
                    name: '热度',
                    type: 'bar',
                    data: processedData.top10Data.map(item => item.value),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: '#4facfe'},
                            {offset: 1, color: '#00f2fe'}
                        ]),
                        borderRadius: [0, 6, 6, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(params) {
                            return (params.value / 10000).toFixed(1) + '万';
                        },
                        color: '#e0e7ff',
                        fontSize: 10
                    },
                    barWidth: '70%'
                }]
            });

            // 热搜分类分布
            const categoryChart = echarts.init(document.getElementById('categoryChart'));
            categoryChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: processedData.categoryChartData.map(item => item.name),
                    textStyle: {
                        color: '#e0e7ff',
                        fontSize: 10
                    }
                },
                series: [{
                    name: '分类分布',
                    type: 'pie',
                    radius: ['40%', '65%'],
                    center: ['40%', '50%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 6,
                        borderColor: '#0f1c3f',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 8,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: processedData.categoryChartData,
                    color: ['#4facfe', '#00f2fe', '#ff6a88', '#ffd371', '#9b59b6', '#2ecc71']
                }]
            });

            // 热度趋势分布
            const trendChart = echarts.init(document.getElementById('trendChart'));
            trendChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    formatter: '排名 {b}: {c}'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: Array.from({length: processedData.trendData.length}, (_, i) => i + 1),
                    name: '排名',
                    nameLocation: 'end',
                    nameTextStyle: {
                        color: '#a3b1d5',
                        padding: [5, 0, 0, 0],
                        fontSize: 10
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#5d7ab9'
                        }
                    },
                    axisLabel: {
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.15)'
                        }
                    }
                },
                yAxis: {
                    type: 'log',
                    name: '热度值',
                    nameTextStyle: {
                        color: '#a3b1d5',
                        padding: [0, 0, 0, 40],
                        fontSize: 10
                    },
                    axisLabel: {
                        formatter: function(value) {
                            return (value / 10000).toFixed(1) + '万';
                        },
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.15)'
                        }
                    }
                },
                series: [{
                    name: '热度',
                    type: 'line',
                    data: processedData.trendData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    lineStyle: {
                        width: 3,
                        color: '#00f2fe',
                        shadowColor: 'rgba(0, 242, 254, 0.5)',
                        shadowBlur: 8
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#00f2fe',
                        borderWidth: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: 'rgba(0, 242, 254, 0.5)'},
                            {offset: 1, color: 'rgba(0, 242, 254, 0.05)'}
                        ])
                    }
                }]
            });

            // 标签类型分布
            const labelChart = echarts.init(document.getElementById('labelChart'));
            labelChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: '5%',
                    left: 'center',
                    data: processedData.labelChartData.map(item => item.name),
                    textStyle: {
                        color: '#e0e7ff',
                        fontSize: 10
                    }
                },
                series: [{
                    name: '标签分布',
                    type: 'pie',
                    radius: ['30%', '55%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 6,
                        borderColor: '#0f1c3f',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 8,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: processedData.labelChartData,
                    color: ['#4facfe', '#00f2fe', '#ff6a88', '#ffd371']
                }]
            });

            // 分类平均热度
            const avgHeatChart = echarts.init(document.getElementById('avgHeatChart'));
            avgHeatChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: {c}'
                },
                grid: {
                    left: '0%',
                    right: '10%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: function(value) {
                            return (value / 10000).toFixed(1) + '万';
                        },
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.2)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: processedData.avgHeatChartData.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        fontSize: 10,
                        color: '#e0e7ff'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [{
                    name: '平均热度',
                    type: 'bar',
                    data: processedData.avgHeatChartData.map(item => item.value),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: '#ff6a88'},
                            {offset: 1, color: '#ffd371'}
                        ]),
                        borderRadius: [6, 0, 0, 6]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(params) {
                            return (params.value / 10000).toFixed(1) + '万';
                        },
                        color: '#e0e7ff',
                        fontSize: 10
                    },
                    barWidth: '70%'
                }]
            });

            // 热搜热度分布直方图
            const distributionChart = echarts.init(document.getElementById('distributionChart'));
            distributionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}<br/>数量: {c}'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.distributionLabels,
                    axisLabel: {
                        interval: 0,
                        fontSize: 10,
                        color: '#a3b1d5',
                        rotate: 45
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#5d7ab9'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量',
                    nameTextStyle: {
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    axisLabel: {
                        color: '#a3b1d5',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.15)'
                        }
                    }
                },
                series: [{
                    name: '热搜数量',
                    type: 'bar',
                    data: processedData.distributionData,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#4facfe'},
                            {offset: 1, color: '#00f2fe'}
                        ]),
                        borderRadius: [3, 3, 0, 0]
                    },
                    barWidth: '70%'
                }]
            });

            // 响应式调整
            window.addEventListener('resize', function() {
                top10Chart.resize();
                categoryChart.resize();
                trendChart.resize();
                labelChart.resize();
                avgHeatChart.resize();
                distributionChart.resize();
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            createStarfield();

            // 获取数据并初始化
            Promise.all([fetchHotSearches(), fetchStats()])
                .then(([hotSearches, stats]) => {
                    // 更新统计数据展示
                    updateStatsDisplay(stats);

                    // 初始化图表
                    initCharts(hotSearches);

                    // 设置自动刷新（每5分钟）
                    setInterval(() => {
                        Promise.all([fetchHotSearches(), fetchStats()])
                            .then(([newHotSearches, newStats]) => {
                                updateStatsDisplay(newStats);
                                initCharts(newHotSearches);
                            });
                    }, 5 * 60 * 1000); // 5分钟
                });
        });
    </script>
</body>
</html>